<template>
  <div class="container">
    <!-- 左侧部分 -->
    <div class="left-side">
      <!-- 今日数据 -->
      <div class="block today-data">
        <h2 class="main-title">今日数据</h2>
        <div class="today-container">
          <div class="box">
            <div class="content1">{{this.hyZhuCe}}</div>
            <div class="content2">会员注册</div>
          </div>
          <div class="box">
            <div class="content1">{{this.hyShenHe}}</div>
            <div class="content2">会员审核</div>
          </div>
          <div class="box">
            <div class="content1">{{this.gongYingCount}}</div>
            <div class="content2">药材供应/条</div>
          </div>
          <div class="box">
            <div class="content1">{{this.caiGouCount}}</div>
            <div class="content2">药材采购/条</div>
          </div>
          <div class="box">
            <div class="content1">{{this.baoJiaCount}}</div>
            <div class="content2">参与报价/人</div>
          </div>
          <div class="box">
            <div class="content1">{{this.gongYingXJCount}}</div>
            <div class="content2">下架供应</div>
          </div>
          <div class="box">
            <div class="content1">{{this.caiGouXJCount}}</div>
            <div class="content2">下架采购</div>
          </div>
        </div>
        <!-- 填充今日数据内容 -->
      </div>
      <!-- 中间层：快捷入口和资讯分类 -->
      <div class="top-row">
        <div class="block quick-access">
          <h2 class="main-title">快捷入口</h2>
          <div class="icon-container">
            <div class="icon-row">
              <div class="icon-wrapper" @click="goToPage('hysh')">
                <i class="icon"><img src="../../../static/img/zysyHYSH.png"></i>
                <span>会员审核</span>
              </div>
              <div class="icon-wrapper" @click="goToPage('ycgy')">
                <i class="icon"><img src="../../../static/img/zysyYCGY.png"></i>
                <span>药材供应</span>
              </div>
            </div>
            <div class="icon-row">
              <div class="icon-wrapper" @click="goToPage('yccg')">
                <i class="icon"><img src="../../../static/img/zysyYCCg.png"></i>
                <span>药材采购</span>
              </div>
              <div class="icon-wrapper" @click="goToPage('yczd')">
                <i class="icon"><img src="../../../static/img/zysyYCZD.png"></i>
                <span>药材字典</span>
              </div>
              <div class="icon-wrapper" @click="goToPage('yczh')">
                <i class="icon"><img src="../../../static/img/zysyYCZH.png"></i>
                <span>药材召回</span>
              </div>
            </div>
          </div>
        </div>
        <div class="block info-classification">
          <h2 class="main-title">资讯分类</h2>
          <div class="tuBiao" style="width: 100%;height: 100%">
<!--            style="width:550px;height: 250px;"-->
            <div style="height: 100%;width: 100%" ref="zxfl" class="tuBiao" ></div>
          </div>

        </div>
      </div>
      <!-- 最下层：中药材分类和用户统计 -->
      <div class="bottom-row">
        <div class="block herbal-classification">
          <h2 class="main-title">中药材分类</h2>
          <div class="tuBiao" style="width: 100%;height: 100%">
            <div style="height: 100%;width: 100%" ref="zycfl" ></div>
          </div>
        </div>
        <div class="block herbal-classification">
          <h2 class="main-title">用户统计</h2>
          <div class="tuBiao" style="width: 100%;height: 100%">
            <div style="height: 100%;width: 100%" ref="yhtj" ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧部分 -->
    <div class="right-side">
      <!-- 药材召回 -->
      <div class="block recall">
        <div class="biaoti">
<!--          main-title-->
          <h2 class="main-title">药材召回</h2>
<!--          <div class="righttitle" >更多</div>-->
          <el-button type="text"  class="righttitle"
                     @click="yCZHHandle">更多</el-button>
        </div>
        <div class="table-container">
          <div v-for="(row, rowIndex) in zhaoHuiList" :key="'row' + rowIndex" class="row">
            <div class="cell first-cell">
              {{ row.createTime }}
            </div>
            <div class="cell second-cell">
              {{ row.zhaoHuiBiaoTi}}
            </div>
          </div>
        </div>
      </div>
      <!-- 最新供应 -->
      <div class="block latest-supply">
        <div class="biaoti">
          <h2 class="main-title">最新供应</h2>
<!--          <div class="righttitle">更多</div>-->
          <el-button type="text"  class="righttitle"
                     @click="zXGYHandle">更多</el-button>
        </div>
        <div class="table-container">
          <div v-for="(row, rowIndex) in zXGongYList" :key="'row' + rowIndex" class="row">
            <div class="cell first-cell-gy">
              {{ row.yaoCaiChanDi }}
            </div>
            <div class="cell second-cell-gy">
              {{ row.yaoCaiMingCheng}}  {{row.gongYingShuLiang}} 吨
            </div>
            <div class="cell third-cell-gy">
              {{ row.createTime}}
            </div>
          </div>
        </div>

        <!-- 填充最新供应内容 -->
      </div>
      <!-- 最新采购 -->
      <div class="block latest-purchase">
        <div class="biaoti">
          <h2 class="main-title">最新采购</h2>
<!--          <div class="righttitle">更多</div>-->
          <el-button type="text"  class="righttitle"
                     @click="zXCGHandle">更多</el-button>
        </div>
        <div class="table-container">
          <div v-for="(row, rowIndex) in zXCaiGouList" :key="'row' + rowIndex" class="row">
            <div class="cell" style="flex: 0.2">
              {{ row.lianXiRen }}
            </div>
            <div class="cell " style="flex: 0.2">
              {{ row.baoJiaRenShu}} 人报价
            </div>
            <div class="cell " style="flex: 0.2">
              {{ row.yaoCaiMingCheng}} {{row.xuQiuLiang}}
            </div>
            <div class="cell " style="flex: 0.4">
              {{ row.createTime}}
            </div>
          </div>
        </div>
      </div>
      <yao-cai-zhao-hui-z-h-g-g v-if="yczhaoHVisiable" ref="ycHuiGou"></yao-cai-zhao-hui-z-h-g-g>
      <zui-xin-cai-cai-gou v-if="zxcgVisiable"  ref="zuiXinCaiGou"></zui-xin-cai-cai-gou>
      <zui-xin-gong-ying v-if="zxgyVisiable" ref="zuiXinGongY"></zui-xin-gong-ying>

    </div>
  </div>
</template>

<script>

import * as echarts from "echarts";
import yaoCaiZhaoHuiZHGG from "../modules/shouYe/yaoCaiZhaoHuiZHGG.vue";
import zuiXinCaiCaiGou from "../modules/shouYe/zuiXinCaiCaiGou.vue";
import zuiXinGongYing from "../modules/shouYe/zuiXinGongYing.vue";
export default {
components:{
  yaoCaiZhaoHuiZHGG,
  zuiXinCaiCaiGou,
  zuiXinGongYing
},
  data() {
    return {
      hyZhuCe:0,
      hyShenHe:0,
      gongYingCount:0,
      caiGouCount:0,
      baoJiaCount:0,
      gongYingXJCount:0,
      caiGouXJCount:0,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      zhaoHuiList:[],
      ziXuList:[],
      yaoCaiFenList:[],
      yongHuTJList:[],
     Xdata:[],
      Ydata:[],
      yczhaoHVisiable:false,
      zXGongYList:[],
      zXCaiGouList:[],
      zxcgVisiable:false,
      zxgyVisiable:false,

    }
  },

  mounted() {

  },
  activated() {
    this.getZhaoHuiList()
    this.getZiXuChart()
    this.getYaoCaiFenLeiChart()
    this.getYongHuTJChart()

    this.getZuiXinGongYingList()
    this.getZuiXinCaiGouList()

  },
  methods: {
    getTodayData(){
      this.$nextTick(() => {

        this.$http({
          url: this.$http.adornUrl('/api-trading/shouYe/getTodayData'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.hyZhuCe=data.data.hyZhuCe
            this.hyShenHe=data.data.hyShenHe
            this.gongYingCount=data.data.gongYingCount
            this.caiGouCount=data.data.caiGouCount
            this.baoJiaCount=data.data.baoJiaCount
            this.gongYingXJCount=data.data.gongYingXJCount
            this.caiGouXJCount=data.data.caiGouXJCount
          } else {
            this.totalPage = 0
          }
          this.totalPage = Number(data.data.total)
          this.dataListLoading = false
        })
        //---
      })
    },
    goToPage(pageName) {
      if('hysh' == pageName){
        this.$router.push(`/keHuGuanLi-keHuShenHe`);
      } else if('ycgy' == pageName){
        this.$router.push(`/gongYingGuanLi-gongYingGuanLiYaoCaiGongYing`);
      } else if('yccg' == pageName){
        this.$router.push(`/caiGouGuanLi-caiGouGuanLiYaoCaiCaiGou`);
      } else if('yczd' == pageName){
        this.$router.push(`/yaoCaiZiDian-yaoCaiMingXi1`);
      } else if('yczh' == pageName){
        this.$router.push(`/yaoCaiZhaoHui-yaoCaiZhaoHuiZhaoHuiGongGao`);
      }else {

      }


    },
     formatDateString(dateString) {
  // 假设 dateString 是 "YYYY-MM-DD" 格式
  // 首先，将字符串转换为 Date 对象
  const date = new Date(dateString);

  // 然后，使用 Date 对象的 get 方法来获取年、月、日等部分
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始计数
  const day = date.getDate().toString().padStart(2, '0');
  // 最后，返回格式化的字符串
  return `${year}/${month}/${day}`; // 保持 "YYYY-MM-DD" 格式
},
    getZhaoHuiList(pageIndex) {

      if (pageIndex) {
        this.pageIndex = pageIndex
      }
      this.$nextTick(() => {
        //this.dataListLoading = true
        this.zhaoHuiList=[]
        this.$http({
          url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            if(data.data.records.length > 5){

              for (let i = 0; i <5; i++) {
                data.data.records[i].createTime=this.formatDateString( data.data.records[i].createTime)
              }
              this.zhaoHuiList=data.data.records.slice(0,5)
              console.log(this.zhaoHuiList.length)
            }else{
              for (let i = 0; i <data.data.records.length; i++) {
                data.data.records[i].createTime=this.formatDateString( data.data.records[i].createTime)
              }
              this.zhaoHuiList=data.data.records
            }
          } else {
            this.zhaoHuiList = []
            this.totalPage = 0
          }
          this.totalPage = Number(data.data.total)
          this.dataListLoading = false
        })
        //---
      })

    },
    getZuiXinGongYingList(pageIndex) {

      if (pageIndex) {
        this.pageIndex = pageIndex
      }
      this.$nextTick(() => {
        //this.dataListLoading = true
        this.zXGongYList=[]
        this.$http({
          url: this.$http.adornUrl('/api-trading/gongYingGuanLi/gongYingGuanLiYaoCaiGongYing/getCurrentGongYing'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            if(data.data.records.length > 5){

              this.zXGongYList=data.data.records.slice(0,5)
            }else{

              this.zXGongYList=data.data.records
            }
          } else {
            this.zXGongYList = []
            this.totalPage = 0
          }
          this.totalPage = Number(data.data.total)
          this.dataListLoading = false
        })
        //---
      })

    },
    getZuiXinCaiGouList(pageIndex) {

      if (pageIndex) {
        this.pageIndex = pageIndex
      }
      this.$nextTick(() => {
        //this.dataListLoading = true
        this.zXCaiGouList=[]
        this.$http({
          url: this.$http.adornUrl('/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getCurrentCaiGou'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log("eeee" + data.data.length)
            if(data.data.list.length > 5){

              this.zXCaiGouList=data.data.list.slice(0,5)
            }else{

              this.zXCaiGouList=data.data.list
            }
          } else {
            this.zXCaiGouList = []
            this.totalPage = 0
          }
          this.totalPage = Number(data.data.total)
          this.dataListLoading = false
        })
        //---
      })

    },
    getZiXuChart(){
      this.ziXuList=[]
      this.$http({
        url: this.$http.adornUrl('/api-trading/shouYe/getZXProportion'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.ziXuList = data.data
          if(this.ziXuList){
            this.initChartsZX()
          }
        } else {
          this.dataList = []
        }

      })
    },
    getYaoCaiFenLeiChart(){

      this.yaoCaiFenList=[]
      this.$http({
        url: this.$http.adornUrl('/api-trading/shouYe/getYaoCaiProportion'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.yaoCaiFenList = data.data
          if(this.yaoCaiFenList){
            this.initChartsYCFL()
          }
        } else {
          this.yaoCaiFenList = []
        }

      })
    },
    getYongHuTJChart(){
      this.Xdata=[]
      this.Ydata=[]
      this.$http({
        url: this.$http.adornUrl('/api-trading/shouYe/getUserZTCount'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        if (data && data.code === 0) {

          for (let i = 0; i < data.data.length; i++) {
            this.Xdata.push(data.data[i].shiFouRenZheng)
            this.Ydata.push(data.data[i].count)
          }
          if(this.Xdata && this.Ydata){
            console.log(this.Xdata)
            console.log(this.Ydata)
            this.initChatrsYHTJ()
          }
        } else {
          this.Xdata=[]
          this.Ydata=[]
        }

      })
    },
    initChartsZX(){
      const chart = echarts.init(this.$refs.zxfl);
      const option = {
    /*    title: {
          text: '',
          // subtext: 'Fake Data',
          left: 'center',
          textStyle: {
            fontSize: 20,// 设置标题字体大小为20
            left: 'center'
          }
        },*/
        // 设置canvas内部表格的内距
        // radius: ['30%', '60%'],//饼图的半径

        tooltip: {
          trigger: 'item',
          formatter: '{a0}<br />{b0}: {d0} %'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          padding: [10, 20, 20, 0],
          textStyle: {
            fontSize: 13,// 设置标题字体大小为20
            left: 'center'
          }
        },
        series: [
          {
            name: '资讯分类占比',
            type: 'pie',
            radius: '90%',
            center: ['40%', '50%'], // 调整饼图位置
            data:this.ziXuList,
            textStyle: {
              fontSize: 20,// 设置标题字体大小为20
            },
            axisLabel: {
              formatter: '{value} %'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: function (colors) {
            /*      var colorList = [
                    '#fc8251',
                    '#5470c6',
                    '#9A60B4',
                    '#ef6567',
                    '#f9c956',
                    '#3BA272'
                  ];
                  return colorList[colors.dataIndex];*/
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 270),
                      Math.round(Math.random() * 370),
                      Math.round(Math.random() * 400)
                    ].join(',') +
                    ')'
                  );
                }
              },
            },
          }
        ]
      };
      chart.setOption(option);
    },
    initChartsYCFL(){
      const chart = echarts.init(this.$refs.zycfl);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a0}<br />{b0}: {d0} %'
        },
        legend: {
          orient: 'vertical',
          top: '5%',
          left: 'right',
          textStyle: {
            fontSize: 13,// 设置标题字体大小为20
            left: 'center'
          }
        },
        series: [
          {
            name: '中药材分类',
            type: 'pie',
            radius: ['60%', '95%'],
            center:['45%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.yaoCaiFenList,
            itemStyle: {
              normal: {
                color: function (colors) {
                  /*     var colorList = [
                         '#fc8251',
                         '#5470c6',
                         '#9A60B4',
                         '#ef6567',
                         '#f9c956',
                         '#3BA272'
                       ];
                       return colorList[colors.dataIndex];*/
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 270),
                      Math.round(Math.random() * 370),
                      Math.round(Math.random() * 400)
                    ].join(',') +
                    ')'
                  );
                }
              },
            },
          }
        ]
      };
      chart.setOption(option);
    },
    initChatrsYHTJ(){
      const chart = echarts.init(this.$refs.yhtj);
      const option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter:'{a0}<br />{b0}:{c0}'
          formatter:'{b0}: {c0}'
        },
        grid: {
          top:'2%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.Xdata,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                // color: 'red',         // 文字颜色
                fontSize: 14,        // 文字字号
                fontFamily: 'Arial'  // 文字字体
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 10,
            interval: 1,
          }
        ],
        series: [
          {
             name: '用户统计',
            type: 'bar',
            barWidth: '60%',
            data: this.Ydata,
            itemStyle: {
              normal: {
                color:'#FFA07A'
            /*    color: function (colors) {
                        var colorList = [
                          '#fc8251',
                          '#5470c6',
                          '#9A60B4',
                          '#ef6567',
                          '#f9c956',
                          '#3BA272'
                        ];
                        return colorList[colors.dataIndex];
                }*/
              },
            },

          }
        ]
      };
      chart.setOption(option);
    },
    yCZHHandle(){
    this.yczhaoHVisiable=true
      this.$nextTick(() => {
        this.$refs.ycHuiGou.init()
      })
    },
    zXCGHandle(){
      this.zxcgVisiable=true
      this.$nextTick(() => {
        this.$refs.zuiXinCaiGou.init()
      })
    },
    zXGYHandle(){
      this.zxgyVisiable=true
      this.$nextTick(() => {
        this.$refs.zuiXinGongY.init()
      })
    },
  }
}
</script>

<style lang="scss"  scoped>
//=====资讯
.tuBiao{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
//=====
//快捷键入口=====
.icon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.icon-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;

}

.icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.icon-wrapper:hover {
  transform: scale(1.1);
}

.icon {
  width: 48px; /* 根据需要调整图标大小 */
  height: 48px; /* 根据需要调整图标大小 */
  border: 2px dashed #ccc;
  /* 这里添加图标的样式或类名 */
}

span {
  color: #333333;

  margin-top: 10px; /* 根据需要调整文字与图标的间距 */
}
//=====
//中药材找回
.biaoti{
  display: flex;
  align-items: center;     /* 垂直居中对齐子元素 */
  justify-content: space-between; /* 让h2靠左，div靠右 */
}
/*.lefttitle{
  margin-right: auto;      !* 将标题推到容器的左边 *!
  flex: 1;                 !* 允许标题占据剩余空间 *!
}*/
.righttitle{
  color: #087C70;
  font-weight: bold;
  //margin-left: auto;       /* 将div推到容器的右边 */
 /* text-align: right;       !* 确保div内部内容靠右对齐 *!
  margin-top: 0px;*/
}
.table-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  display: flex;
  //justify-content: space-between; /* 根据需要调整列间距 */
  flex-grow: 1; //如果所有 flex 项目的 flex-grow 值都是 1，它们将平分额外的空间。
  align-items: center;
}

.cell {
  //flex: 1; /* 每个单元格宽度相等 */
  padding: 10px; /* 单元格内边距 */
  border: 0.5px solid rgba(0,0,0,0.08); /* 单元格边框 */
  text-align: left; /* 文本居中 */
}
.first-cell {
  flex: 0.2; /* 第一列宽度设置为30% */
  /* 或者使用 width: 30%; */
}
.second-cell {
  flex: 0.8; /* 第二列宽度设置为70% */
  /* 或者使用 width: 70%; */
}
.first-cell-gy {
  flex: 0.4; /* 第一列宽度设置为30% */
  /* 或者使用 width: 30%; */
}
.second-cell-gy {
  flex: 0.2; /* 第二列宽度设置为70% */
  /* 或者使用 width: 70%; */
}
.third-cell-gy {
  flex: 0.4; /* 第二列宽度设置为70% */
  /* 或者使用 width: 70%; */
}
//====
.content1{
  color: #417C8D ;
  font-size: 16px;
  font-weight: bold;
}
.content2{
  color: #606266;
  font-size: 14px;
  padding-top: 5px;
}
.today-container{
  display: flex;          /* 使用Flexbox布局 */
  justify-content: space-between; /* 使子元素在容器内均匀分布 */
}
.box{
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center;    /* 垂直居中所有子元素 */
  width: 140px;
  height: 81px;
  margin: 5px;            /* 每个div的外边距，如果需要更紧凑可以调整 */

 /* text-align: center;     !* 文本居中 *!
  line-height: 100px;    !* 垂直居中文本 *!*/
  background: rgba(65,124,141,0.07);
  border-radius: 4px 4px 4px 4px;
}
.main-title {
/* font-size: 16px;
  font-weight: bold;*/
  margin-top: 0px;
}
.container {
  display: flex;
  background-color: #F5F5F5 !important;
  height: inherit;
  height: 939px;
}
.site-content>.el-card, .el-tab-pane>.el-card {
  border: none !important;
  background: #F5F5F5 100% !important;
}
.site-content>.el-card>.el-card__body {
  background: #F5F5F5 100% !important;
  padding: 0px !important;
}
.el-card__body {
  /* background: #1e211d !important; */
  padding: 0px;
}
.left-side, .right-side {
  padding: 8px;
  height: 100%;
}
.left-side {
  width: 66.666%;
  display: flex;
  flex-direction: column;
}
.right-side {
  width: 33.333%;

}

.block {
  border-radius: 16px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
/*  align-items: center;
  justify-content: center;*/
  //justify-content: flex-start; /* 水平方向从容器的开始位置开始排列 */
  //align-items: flex-start; /* 垂直方向从容器的开始位置开始排列 */
  flex-direction: column;
}
/*.top-row, .bottom-row {
  display: flex;
}*/
.recall, .latest-supply, .latest-purchase{
  height: 32.1%;
}
.bottom-row {
  display: flex;
  justify-content: space-between;
  height: 42%;
}
.top-row {
  display: flex;
  justify-content: space-between;
  height:36%;
  margin-bottom: 16px;
}
.today-data {
  width: 100%;
  height: 170px;
}
.quick-access, .info-classification {
  width: calc(50% - 8px);
  //height: 317px;
  height: 100%;
  margin: 16px 16px 16px 0; /* Adjust margin based on border-radius */
}
.info-classification{
  margin-right: 0px;
  height: 100%;
}
.herbal-classification, .user-stats {
  width: calc(50% - 8px);
  //height: 313px;
  height: 100%;
  margin: 16px 16px 0px 0; /* Adjust margin based on border-radius */
}
.user-stats{
  //margin: 0px;
  margin: 16px 16px 0px 0; /* Adjust margin based on border-radius */
}
.right-side .block {
  margin-bottom: 16px;
  //height: 264px;
}
.right-side .block:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .top-row, .bottom-row {
    flex-direction: column;
  }
  .quick-access, .info-classification, .herbal-classification, .user-stats {
    width: 100%;
    margin: 8px 0;
  }
}
</style>
